/**
 * Created by admin on 2017/1/4.
 */
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';

@Component({
    moduleId: module.id,
    selector: 'my-heroes',
    template: `
        <h1>Heroes List</h1>
        <ul *ngFor="let hero of heroes" class="heroes_list" >
            <li class="heroes_item" (click)="onSelect(hero)">
                <span class="badge">{{hero.id}}</span>
                <span class="name">{{hero.name}}</span>
            </li>
        </ul>
    `,
    styles:[`
        .heroes_list{position: relative;}
        .heroes_item{
            width: 300px;
            background: #759995;
            color: #fff;
            border-radius: 5px;
            position: relative;
            left: 0;
            top:0;
            transition: all 0.3s;
        }
        .heroes_item:hover{background:  #539699;left: 5px;}
        .badge{
            display: inline-block;
            width: 50px;
           padding: 5px;
           text-align: center;
            background: #336699;
            border-radius: 5px 0 0 5px;
        }
        .name{text-indent: 5px;}
    `]
})
export class HeroesComponent implements OnInit {
    heroes: Hero[];
    //selectedHero: Hero;

    constructor(
        private heroService:HeroService,
        private router:Router
    ) {
    }

    onSelect(hero:Hero):void{
        //this.selectedHero = hero;
        this.router.navigate(['/detail', hero.id]);
    }
    getHeroes(): void {
        this.heroService.getHeroes()
            .then(heroes => this.heroes = heroes);
    }
    ngOnInit(): void {
        this.getHeroes();
    }

}